<template>
  <div class="bgc">
    <div class="container">
      <div class="djradio">
        <div class="djradio-sprite">
          <div class="djradio-margin">
            <span class="likeA">
              <div class="sprite-1"></div>
              <em> 情感调频 </em>
            </span>
          </div>
          <div class="djradio-margin">
            <span class="likeA">
              <div class="sprite-2"></div>
              <em> {{ programs[2].radio.category }} </em>
            </span>
          </div>
          <div class="djradio-margin">
            <span class="likeA">
              <div class="sprite-3"></div>
              <em> 声音恋人 </em>
            </span>
          </div>
          <div class="djradio-margin">
            <span class="likeA">
              <div class="sprite-4"></div>
              <em> 创作翻唱 </em>
            </span>
          </div>
          <div class="djradio-margin">
            <span class="likeA">
              <div class="sprite-5"></div>
              <em> 声之剧场 </em>
            </span>
          </div>
          <div class="djradio-margin">
            <span class="likeA">
              <div class="sprite-6"></div>
              <em> 脱口秀 </em>
            </span>
          </div>
          <div class="djradio-margin">
            <span class="likeA">
              <div class="sprite-7"></div>
              <em> 侃侃而谈 </em>
            </span>
          </div>
          <div class="djradio-margin">
            <span class="likeA">
              <div class="sprite-8"></div>
              <em> 电音趴 </em>
            </span>
          </div>
          <div class="djradio-margin">
            <span class="likeA">
              <div class="sprite-9"></div>
              <em> 助眠解压 </em>
            </span>
          </div>
          <div class="djradio-margin">
            <span class="likeA">
              <div class="sprite-10"></div>
              <em> 你好爱豆 </em>
            </span>
          </div>
          <div class="djradio-margin">
            <span class="likeA">
              <div class="sprite-11"></div>
              <em> 铃声 </em>
            </span>
          </div>
          <div class="djradio-margin">
            <span class="likeA">
              <div class="sprite-12"></div>
              <em> 其他 </em>
            </span>
          </div>
        </div>
        <div class="djradio-flex">
          <div class="title-flex">
            <div class="radio-title">
              <h3>
                <span>推荐节目</span>
              </h3>
              <p><span class="likeA">更多></span></p>
            </div>
            <div class="table-zebra">
              <div class="zebra-white">
                <a class="dif"
                  ><img :src="programs[0].blurCoverUrl" alt=""
                /></a>
                <div>
                  <h3 class="small-h3">
                    <span class="likeA">{{ programs[0].mainSong.name }}</span>
                  </h3>
                  <p class="small-p">
                    <a class="gray-a">{{
                      programs[0].mainSong.artists[0].name
                    }}</a>
                  </p>
                </div>
                <button>{{ programs[0].radio.category }}</button>
              </div>
              <div class="zebra-gray">
                <a class="dif"
                  ><img :src="programs[1].blurCoverUrl" alt=""
                /></a>
                <div>
                  <h3 class="small-h3">
                    <span class="likeA">{{ programs[1].mainSong.name }}</span>
                  </h3>
                  <p class="small-p">
                    <a class="gray-a">{{
                      programs[1].mainSong.artists[0].name
                    }}</a>
                  </p>
                </div>
                <button>{{ programs[1].radio.category }}</button>
              </div>
              <div class="zebra-white">
                <a class="dif"
                  ><img :src="programs[2].blurCoverUrl" alt=""
                /></a>
                <div>
                  <h3 class="small-h3">
                    <span class="likeA">{{ programs[2].mainSong.name }}</span>
                  </h3>
                  <p class="small-p">
                    <a class="gray-a">{{
                      programs[2].mainSong.artists[0].name
                    }}</a>
                  </p>
                </div>
                <button>{{ programs[2].radio.category }}</button>
              </div>
              <div class="zebra-gray">
                <a class="dif"
                  ><img :src="programs[3].blurCoverUrl" alt=""
                /></a>
                <div>
                  <h3 class="small-h3">
                    <span class="likeA">{{ programs[3].mainSong.name }}</span>
                  </h3>
                  <p class="small-p">
                    <a class="gray-a">{{
                      programs[3].mainSong.artists[0].name
                    }}</a>
                  </p>
                </div>
                <button>{{ programs[3].radio.category }}</button>
              </div>
              <div class="zebra-white">
                <a class="dif"
                  ><img :src="programs[4].blurCoverUrl" alt=""
                /></a>
                <div>
                  <h3 class="small-h3">
                    <span class="likeA">{{ programs[4].mainSong.name }}</span>
                  </h3>
                  <p class="small-p">
                    <a class="gray-a">{{
                      programs[4].mainSong.artists[0].name
                    }}</a>
                  </p>
                </div>
                <button>{{ programs[4].radio.category }}</button>
              </div>
              <div class="zebra-gray">
                <a class="dif"
                  ><img :src="programs[5].blurCoverUrl" alt=""
                /></a>
                <div>
                  <h3 class="small-h3">
                    <span class="likeA">{{ programs[5].mainSong.name }}</span>
                  </h3>
                  <p class="small-p">
                    <a class="gray-a">{{
                      programs[5].mainSong.artists[0].name
                    }}</a>
                  </p>
                </div>
                <button>{{ programs[5].radio.category }}</button>
              </div>
              <div class="zebra-white">
                <a class="dif"
                  ><img :src="programs[6].blurCoverUrl" alt=""
                /></a>
                <div>
                  <h3 class="small-h3">
                    <span class="likeA">{{ programs[6].mainSong.name }}</span>
                  </h3>
                  <p class="small-p">
                    <a class="gray-a">{{
                      programs[6].mainSong.artists[0].name
                    }}</a>
                  </p>
                </div>
                <button>{{ programs[6].radio.category }}</button>
              </div>
              <div class="zebra-gray">
                <a class="dif"
                  ><img :src="programs[7].blurCoverUrl" alt=""
                /></a>
                <div>
                  <h3 class="small-h3">
                    <span class="likeA">{{ programs[7].mainSong.name }}</span>
                  </h3>
                  <p class="small-p">
                    <a class="gray-a">{{
                      programs[7].mainSong.artists[0].name
                    }}</a>
                  </p>
                </div>
                <button>{{ programs[7].radio.category }}</button>
              </div>
              <div class="zebra-white">
                <a class="dif"
                  ><img :src="programs[8].blurCoverUrl" alt=""
                /></a>
                <div>
                  <h3 class="small-h3">
                    <span class="likeA">{{ programs[8].mainSong.name }}</span>
                  </h3>
                  <p class="small-p">
                    <a class="gray-a">{{
                      programs[8].mainSong.artists[0].name
                    }}</a>
                  </p>
                </div>
                <button>{{ programs[8].radio.category }}</button>
              </div>
              <div class="zebra-gray">
                <a class="dif"
                  ><img :src="programs[9].blurCoverUrl" alt=""
                /></a>
                <div>
                  <h3 class="small-h3">
                    <span class="likeA">{{ programs[9].mainSong.name }}</span>
                  </h3>
                  <p class="small-p">
                    <a class="gray-a">{{
                      programs[9].mainSong.artists[0].name
                    }}</a>
                  </p>
                </div>
                <button>{{ programs[9].radio.category }}</button>
              </div>
            </div>
          </div>
          <div class="title-flex">
            <div class="radio-title">
              <h3>
                <span>节目排行榜</span>
              </h3>
              <p><span class="likeA">更多></span></p>
            </div>
            <div class="table-zebra">
              <div class="zebra-white">
                <a class="dif"
                  ><img :src="toplist[0].program.dj.avatarUrl" alt=""
                /></a>
                <div>
                  <h3 class="small-h3">
                    <span class="likeA">{{
                      toplist[0].program.mainSong.name
                    }}</span>
                  </h3>
                  <p class="small-p">
                    <a class="gray-a">{{ toplist[0].program.radio.name }}</a>
                  </p>
                </div>
                <button>{{ toplist[0].program.radio.category }}</button>
              </div>
              <div class="zebra-gray">
                <a class="dif"
                  ><img :src="toplist[1].program.dj.avatarUrl" alt=""
                /></a>
                <div>
                  <h3 class="small-h3">
                    <span class="likeA">{{
                      toplist[1].program.mainSong.name
                    }}</span>
                  </h3>
                  <p class="small-p">
                    <a class="gray-a">{{ toplist[1].program.radio.name }}</a>
                  </p>
                </div>
                <button>{{ toplist[1].program.radio.category }}</button>
              </div>
              <div class="zebra-white">
                <a class="dif"
                  ><img :src="toplist[2].program.dj.avatarUrl" alt=""
                /></a>
                <div>
                  <h3 class="small-h3">
                    <span class="likeA">{{
                      toplist[2].program.mainSong.name
                    }}</span>
                  </h3>
                  <p class="small-p">
                    <a class="gray-a">{{ toplist[2].program.radio.name }}</a>
                  </p>
                </div>
                <button>{{ toplist[2].program.radio.category }}</button>
              </div>
              <div class="zebra-gray">
                <a class="dif"
                  ><img :src="toplist[3].program.dj.avatarUrl" alt=""
                /></a>
                <div>
                  <h3 class="small-h3">
                    <span class="likeA">{{
                      toplist[3].program.mainSong.name
                    }}</span>
                  </h3>
                  <p class="small-p">
                    <a class="gray-a">{{ toplist[3].program.radio.name }}</a>
                  </p>
                </div>
                <button>{{ toplist[3].program.radio.category }}</button>
              </div>
              <div class="zebra-white">
                <a class="dif"
                  ><img :src="toplist[4].program.dj.avatarUrl" alt=""
                /></a>
                <div>
                  <h3 class="small-h3">
                    <span class="likeA">{{
                      toplist[4].program.mainSong.name
                    }}</span>
                  </h3>
                  <p class="small-p">
                    <a class="gray-a">{{ toplist[4].program.radio.name }}</a>
                  </p>
                </div>
                <button>{{ toplist[4].program.radio.category }}</button>
              </div>
              <div class="zebra-gray">
                <a class="dif"
                  ><img :src="toplist[5].program.dj.avatarUrl" alt=""
                /></a>
                <div>
                  <h3 class="small-h3">
                    <span class="likeA">{{
                      toplist[5].program.mainSong.name
                    }}</span>
                  </h3>
                  <p class="small-p">
                    <a class="gray-a">{{ toplist[5].program.radio.name }}</a>
                  </p>
                </div>
                <button>{{ toplist[5].program.radio.category }}</button>
              </div>
              <div class="zebra-white">
                <a class="dif"
                  ><img :src="toplist[6].program.dj.avatarUrl" alt=""
                /></a>
                <div>
                  <h3 class="small-h3">
                    <span class="likeA">{{
                      toplist[6].program.mainSong.name
                    }}</span>
                  </h3>
                  <p class="small-p">
                    <a class="gray-a">{{ toplist[6].program.radio.name }}</a>
                  </p>
                </div>
                <button>{{ toplist[6].program.radio.category }}</button>
              </div>
              <div class="zebra-gray">
                <a class="dif"
                  ><img :src="toplist[7].program.dj.avatarUrl" alt=""
                /></a>
                <div>
                  <h3 class="small-h3">
                    <span class="likeA">{{
                      toplist[7].program.mainSong.name
                    }}</span>
                  </h3>
                  <p class="small-p">
                    <a class="gray-a">{{ toplist[7].program.radio.name }}</a>
                  </p>
                </div>
                <button>{{ toplist[7].program.radio.category }}</button>
              </div>
              <div class="zebra-white">
                <a class="dif"
                  ><img :src="toplist[8].program.dj.avatarUrl" alt=""
                /></a>
                <div>
                  <h3 class="small-h3">
                    <span class="likeA">{{
                      toplist[8].program.mainSong.name
                    }}</span>
                  </h3>
                  <p class="small-p">
                    <a class="gray-a">{{ toplist[8].program.radio.name }}</a>
                  </p>
                </div>
                <button>{{ toplist[8].program.radio.category }}</button>
              </div>
              <div class="zebra-gray">
                <a class="dif"
                  ><img :src="toplist[9].program.dj.avatarUrl" alt=""
                /></a>
                <div>
                  <h3 class="small-h3">
                    <span class="likeA">{{
                      toplist[9].program.mainSong.name
                    }}</span>
                  </h3>
                  <p class="small-p">
                    <a class="gray-a">{{ toplist[9].program.radio.name }}</a>
                  </p>
                </div>
                <button>{{ toplist[9].program.radio.category }}</button>
              </div>
            </div>
          </div>
        </div>
        <div class="djradio-radio">
          <div class="radio-title">
            <h3>
              <span>音乐故事·电台</span>
            </h3>
            <p><span class="likeA">更多></span></p>
          </div>
          <div class="radio-flex">
            <div
              class="main-flex"
              v-for="(radio, index) in radiolist1"
              :key="index"
            >
              <span class="likeA"><img :src="radio.picUrl" alt="" /></span>
              <div>
                <h3>
                  <span class="likeA">{{ radio.name }}</span>
                </h3>
                <div>
                  <p>{{ radio.copywriter }}</p>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="djradio-radio">
          <div class="radio-title">
            <h3>
              <span>助眠解压·电台</span>
            </h3>
            <p><span class="likeA">更多></span></p>
          </div>
          <div class="radio-flex">
            <div
              class="main-flex"
              v-for="(radio, index) in radiolist2"
              :key="index"
            >
              <span class="likeA"><img :src="radio.picUrl" alt="" /></span>
              <div>
                <h3>
                  <span class="likeA">{{ radio.name }}</span>
                </h3>
                <div>
                  <p>{{ radio.copywriter }}</p>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="djradio-radio">
          <div class="radio-title">
            <h3>
              <span>侃侃而谈·电台</span>
            </h3>
            <p><span class="likeA">更多></span></p>
          </div>
          <div class="radio-flex">
            <div
              class="main-flex"
              v-for="(radio, index) in radiolist3"
              :key="index"
            >
              <span class="likeA"><img :src="radio.picUrl" alt="" /></span>
              <div>
                <h3>
                  <span class="likeA">{{ radio.name }}</span>
                </h3>
                <div>
                  <p>{{ radio.copywriter }}</p>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="djradio-radio">
          <div class="radio-title">
            <h3>
              <span>情感调频·电台</span>
            </h3>
            <p><span class="likeA">更多></span></p>
          </div>
          <div class="radio-flex">
            <div
              class="main-flex"
              v-for="(radio, index) in radiolist4"
              :key="index"
            >
              <span class="likeA"><img :src="radio.picUrl" alt="" /></span>
              <div>
                <h3>
                  <span class="likeA">{{ radio.name }}</span>
                </h3>
                <div>
                  <p>{{ radio.copywriter }}</p>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="djradio-radio">
          <div class="radio-title">
            <h3>
              <span>创作翻唱·电台</span>
            </h3>
            <p><span class="likeA">更多></span></p>
          </div>
          <div class="radio-flex">
            <div
              class="main-flex"
              v-for="(radio, index) in radiolist5"
              :key="index"
            >
              <span class="likeA"><img :src="radio.picUrl" alt="" /></span>
              <div>
                <h3>
                  <span class="likeA">{{ radio.name }}</span>
                </h3>
                <div>
                  <p>{{ radio.copywriter }}</p>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="djradio-radio">
          <div class="radio-title">
            <h3>
              <span>其他·电台</span>
            </h3>
            <p><span class="likeA">更多></span></p>
          </div>
          <div class="radio-flex">
            <div
              class="main-flex"
              v-for="(radio, index) in radiolist6"
              :key="index"
            >
              <span class="likeA"><img :src="radio.picUrl" alt="" /></span>
              <div>
                <h3>
                  <span class="likeA">{{ radio.name }}</span>
                </h3>
                <div>
                  <p>{{ radio.copywriter }}</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Djradio',
  data() {
    return {
      djprogram: [],
      programs: [],
      topList: [],
      toplist: [],
      radiolist: [],
      radiolist1: [],
      radiolist2: [],
      radiolist3: [],
      radiolist4: [],
      radiolist5: [],
      radiolist6: [],
      personalized: []
    }
  },
  async mounted() {
    this.djprogram = await this.$API.djradio.reqGetDjprogram()
    this.programs = this.djprogram.programs
    this.topList = await this.$API.djradio.reqGetToplist()
    this.toplist = this.topList.toplist.slice(0, 10)
    this.personalized = await this.$API.djradio.reqGetPersonalized()
    this.radiolist = this.personalized.result
    this.radiolist1 = this.radiolist.slice(0, 4)
    this.radiolist2 = this.radiolist.slice(4, 8)
    this.radiolist3 = this.radiolist.slice(8, 12)
    this.radiolist4 = this.radiolist.slice(12, 16)
    this.radiolist5 = this.radiolist.slice(16, 20)
    this.radiolist6 = this.radiolist.slice(20, 24)
  }
}
</script>

<style scoped>
.bgc {
  width: 100%;
  background: #f5f5f5;
}

.container {
  width: 1000px;
  min-height: 700px;
  margin: 0 auto;
  display: flex;
  border: 1px solid #d3d3d3;
  background: white;
}

.radio-flex {
  display: flex;
  flex-wrap: wrap;
  width: 860px;
  margin-left: -30px;
}

.main-flex {
  display: flex;
  padding-top: 10px;
  margin-left: 30px;
  height: 160px;
  width: 400px;
  border-top: 1px solid #e7e7e7;
}

.main-flex img {
  width: 120px;
  height: 120px;
}

.main-flex h3 .likeA {
  font-size: 18px;
  font-weight: bold;
  color: black;
  margin-bottom: 10px;
}

.main-flex div {
  margin: 16px;
}

.main-flex div div {
  margin: 0;
}

.main-flex p {
  color: #999;
}

.container .djradio {
  padding: 40px;
}

.djradio-sprite {
  display: flex;
  flex-wrap: wrap;
}

.djradio-sprite .djradio-margin {
  margin: 0px 0px 25px 33px;
  width: 70px;
  height: 70px;
  text-align: center;
}

.djradio-sprite .djradio-margin a,
.likeA {
  /* display: block;
  width: 70px;
  height: 70px; */
  background-position: 0px 9999px;
  text-align: center;
  color: rgb(136, 136, 136);
  text-decoration: none;
}

.djradio-sprite a:hover {
  background-position: 0 0;
  text-decoration: none;
  background-color: rgba(0, 0, 0, 0.1);
}

.sprite-1 {
  width: 48px;
  height: 48px;
  background-image: url('./images/fangkuaiyueliang.jpg');
  margin: 2px auto 0px;
  background-position: 0px 0px;
}

.sprite-2 {
  width: 48px;
  height: 48px;
  background-image: url('./images/fangkuaiyinyue.jpg');
  margin: 2px auto 0px;
  background-position: 0px 0px;
}

.sprite-3 {
  width: 48px;
  height: 48px;
  background-image: url('./images/shu.jpg');
  margin: 2px auto 0px;
  background-position: 0px 0px;
}

.sprite-4 {
  width: 48px;
  height: 48px;
  background-image: url('./images/huatong.jpg');
  margin: 2px auto 0px;
  background-position: 0px 0px;
}

.sprite-5 {
  width: 48px;
  height: 48px;
  background-image: url('./images/shipin.jpg');
  margin: 2px auto 0px;
  background-position: 0px 0px;
}

.sprite-6 {
  width: 48px;
  height: 48px;
  background-image: url('./images/shengluehuatong.jpg');
  margin: 2px auto 0px;
  background-position: 0px 0px;
}

.sprite-7 {
  width: 48px;
  height: 48px;
  background-image: url('./images/weixinghuatong.jpg');
  margin: 2px auto 0px;
  background-position: 0px 0px;
}

.sprite-8 {
  width: 48px;
  height: 48px;
  background-image: url('./images/jiugongge.jpg');
  margin: 2px auto 0px;
  background-position: 0px 0px;
}

.sprite-9 {
  width: 48px;
  height: 48px;
  background-image: url('./images/yueliang.jpg');
  margin: 2px auto 0px;
  background-position: 0px 0px;
}

.sprite-10 {
  width: 48px;
  height: 48px;
  background-image: url('./images/ren.jpg');
  margin: 2px auto 0px;
  background-position: 0px 0px;
}

.sprite-11 {
  width: 48px;
  height: 48px;
  background-image: url('./images/ball.jpg');
  margin: 2px auto 0px;
  background-position: 0px 0px;
}

.sprite-12 {
  width: 48px;
  height: 48px;
  background-image: url('./images/shengluehao.jpg');
  margin: 2px auto 0px;
  background-position: 0px 0px;
}

.djradio {
  width: 980px;
}

.djradio-flex {
  margin: 0 auto;
  width: 840px;
  padding-bottom: 10px;
  display: flex;
  justify-content: space-between;
}

.djradio-radio {
  margin: 0 auto;
  width: 840px;
  padding-bottom: 30px;
}

.title-flex {
  padding-bottom: 10px;
  width: 400px;
}

.djradio-title {
  display: flex;
  justify-content: space-between;
  height: 40px;
  line-height: 40px;
}

.radio-title {
  width: 100%;
  height: 40px;
  display: flex;
  justify-content: space-between;
  border-bottom: 2px solid #c20c0c;
}

h3 {
  font-weight: normal;
  font-size: 24px;
}

p {
  height: 31px;
  line-height: 31px;
}

a {
  display: block;
  height: 31px;
  padding-top: 10px;
}

.table-zebra {
  width: 400px;
  padding: 10px 0;
}

.table-zebra .zebra-white,
.zebra-gray {
  display: flex;
  justify-content: space-around;
  border: 1px solid #e2e2e2;
  align-items: center;
  height: 60px;
}

.table-zebra .zebra-white,
.zebra-gray:hover {
  background: #eee;
}

.table-zebra .zebra-gray {
  background: #f7f7f7;
}

.table-zebra img {
  width: 40px;
  height: 40px;
}

.table-zebra .dif {
  padding: 0;
  width: 40px;
  height: 40px;
}

.table-zebra .gray-a {
  color: #999;
  padding: 0;
}

.table-zebra h3 {
  height: 20px;
  line-height: 20px;
  font-size: 12px;
  width: 200px;
  font-weight: normal;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  word-wrap: normal;
  overflow: hidden;
}

.table-zebra h3 .likeA {
  color: #000;
  font-size: 12px;
  white-space: nowrap;
}

.table-zebra button {
  width: 60px;
  height: 22px;
  line-height: 20px;
  border-radius: 0;
  border: 1px solid #999;
  background: white;
}

.likeA:hover {
  text-decoration: underline;
  cursor: pointer;
}
</style>
